<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书管理</title>
    <script type="application/javascript" src="js/vue.min.js"></script>
    <!-- 基于promise 技术的专门用于ajax调用的js-->
    <script type="application/javascript" src="js/axios.min.js"></script>
    <!-- QueryBookServlet, BookDao -->
</head>
<body>
<div id="app">
    书名:<input v-model="name">
    出版社:<input v-model="press">
    出版日期:<input v-model="date">
    <button @click="query">查询</button>
    <table style="width: 100%" border="1">
        <tr>
            <th>编号</th>
            <th>书名</th>
            <th>出版社</th>
            <th>出版日期</th>
            <th>作者</th>
            <th>库存</th>
            <th>图片</th>
            <th>操作</th>
        </tr>
        <tr v-for=" book in list ">
            <td>{{book.id}}</td>
            <td>{{book.bookname}}</td>
            <td>{{book.bookpress}}</td>
            <td>{{book.pressdate}}</td>
            <td>{{book.bookauthor}}</td>
            <td>{{book.bookcount}}</td>
            <!--  images/盗梦空间.jpg          -->
            <td align="center"><img :src="book.bookimage" height="100px"></td>
            <td><a :href="'modify.html#' + book.id">修改</a></td>
        </tr>
    </table>
</div>
<script type="application/javascript">
    var vue = new Vue({
        el : "#app",
        data : {
            list : [],
            name : "",
            press : "",
            date : "",
        },
        // 但 vue 对象创建好之后，立即执行的代码
        created : function (){
            this.finds();
        },
        methods : {
            query() {
                var that = this;
                // 蓝姆达表达式写法， => 箭头函数
                axios({
                    method: 'post',
                    url: "QueryBookServlet/find",
                    params:{
                        name : this.name,
                        press: this.press,
                        date : this.date,
                    }
                }).then(res => {
                    that.list = res.data.data;
                    console.log(that.list);
                })
            },
            finds() {
                var that = this;
                // 蓝姆达表达式写法， => 箭头函数
                axios({
                    method: 'post',
                    url: "QueryBookServlet/finds",
                }).then(res => {
                    that.list = res.data.data;
                    console.log(that.list);
                })
            }
        }
    })
</script>
</body>
</html>